<template>
  <div class="user-box">
    <div v-if="isLogin">
      
      <div>
        <el-tooltip
        class="item"
        effect="dark"
        content="发布文章"
        placement="left"
      >
        <i
          v-show="isLogin"
          class="el-icon-plus publish-text"
          @click="goPublishPress"
        ></i>
      </el-tooltip>
      <el-tooltip
        class="item"
        effect="dark"
        content="退出登陆"
        placement="left"
      >
        <i
          v-show="isLogin"
          class="el-icon-minus publish-text"
          style="top: 64px"
          @click="logout"
        ></i>
      </el-tooltip>
      </div>
      <div class="block">
        <el-badge :value="null" class="item">
          <el-avatar
            v-if="isLogin"
            :size="124"
            :src="`${serveIp}${user.avatar}`"
            @error="errorAvatarHandler"
            @click="goToMyBlog('')"
            style="cursor: pointer"
          >
            <!-- <img src="../assets/icon/touxiang.png" /> -->
          </el-avatar>
        </el-badge>
      </div>
      <div class="baseInfo">
        <p><b @click="goToMyBlog" style="cursor: pointer">{{ user.nickname }}</b></p>
        <p v-if="isLogin" style="font-size: 14px; text-align: center">
          {{ user.description }}
        </p>
      </div>
      <div style="margin-top: 24px" v-if="isLogin">
        <el-row :gutter="20">
          <el-col :span="8" :offset="0">
            <p class="icon-box" @click="goToMyBlog('follow')">
              <i class="el-icon-user right-icon-size"></i>
              <br />
              <b> 69 关注</b>
            </p>
          </el-col>
          <el-col :span="8" :offset="0">
            <p class="icon-box" @click="goToMyBlog('articles')">
              <i class="el-icon-tickets right-icon-size"></i>
              <br />
              <b> {{ userPressCount||0 }} 文章</b>
            </p>
          </el-col>
          <el-col :span="8" :offset="0">
            <p class="icon-box" @click="goToMyBlog('favorites')">
              <i class="el-icon-star-off right-icon-size"></i>
              <br />
              <b> 0 收藏</b>
            </p>
          </el-col>
        </el-row>
      </div>
    </div>
    <div v-else>
      <router-link to="/login"> 请先登陆 </router-link>
    </div>
  </div>
</template>

<script>
import UserApi from "../api/user";
import CommonApi from "../api/common";
import PressApi from "../api/press";
export default {
  data() {
    return {
      isLogin: false,
      serveIp: "",
      user: {
        avatar: "",
        username: "",
      },
      userPressCount:0,
    };
  },
  methods: {
    getUserPressCount() {
    if (this.user && this.user.id) {
      PressApi.getUserPressCount(this.user.id).then(res => {
        if (res.code === 200) {
          this.userPressCount = res.data; // 假设后端返回数量在data字段
        }
      });
    }
  },
    errorAvatarHandler() {
      return true;
    },
    goLogin() {
      this.$router.push("/login");
    },
    logout() {
      this.$confirm("是否要退出登陆？")
        .then((r) => {
          window.localStorage.removeItem("token");
          window.localStorage.removeItem("userInfo");
          this.user = {};
          this.isLogin = false;
          this.$message.success("已退出登陆");
        })
        .catch((e) => {});
    },
    goPublishPress() {
      this.$router.push("/publishPress");
    },
    getUser() {
      //先检查本地存储是否存在用户数据
      let tempUser = window.localStorage.getItem("userInfo");
      if (tempUser) {
        //如果本地存储有数据直接用
        this.isLogin = true;
        this.user = JSON.parse(tempUser);
        return;
      }
      //判断是否登陆状态
      if (!window.localStorage.getItem("token")) {
        this.isLogin = false;
        return;
      }
      UserApi.getUser()
        .then((r) => {
          if (r.code == 200) {
            this.isLogin = true;
            this.user = r.data;

            //将用户数据存储在本地存储中
            window.localStorage.setItem("userInfo", JSON.stringify(r.data));
          } else {
            this.isLogin = false;
          }
        })
        .catch((e) => {});
    },
    goToMyBlog(tab = '') {
      if (!this.isLogin) {
        this.$message.warning('请先登录');
        return;
      }
      this.$router.push("/blog");
    },
  },
  created(){
    const userInfo = window.localStorage.getItem("userInfo");
    if (userInfo) {
      this.user = JSON.parse(userInfo);
      this.getUserPressCount();
    }
  },
  mounted() {
    CommonApi.getIp().then((r) => {
      this.serveIp = `${r.data}`;

      this.getUser();
    });
  },
};
</script>

<style lang="scss" scoped>
.user-box {
  position: relative;
  text-align: center;
  max-width: 360px;
  .el-avatar {
    border: 2px solid #f7f7f7;
  }
  .publish-text {
    position: absolute;
    z-index: 10;
    right: 22px;
    font-size: 22px;
    font-weight: bold;
    transition: 0.2s;
  }
  .logout {
    top: 24px;
  }
  .publish-text:hover {
    cursor: pointer;
    font-size: 25px;
    color: var(--font-color-hover);
  }
  .el-avatar {
    background: none !important;
  }
  .right-icon-size {
    font-size: 18px;
  }
  .icon-box {
    transition: 0.3s;
    line-height: 24px;
    font-size: 14px;
  }
  .icon-box:hover {
    color: var(--font-color-active);
    cursor: pointer;
  }
}
.baseInfo {
  .username {
    transition: 0.3s;
  }
  .username:hover {
    cursor: pointer;
    color: var(--font-color-hover);
  }
  b {
    transition: 0.3s;
    &:hover {
      color: var(--font-color-hover);
    }
  }
}
</style>